<template>
  <div class="notice">
    <van-nav-bar fixed placeholder :title="title" left-text="返回" :right-text="rightText" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    <div class="notice_box">
      <div class="notice_box_top">
        <div class="notice_box_top_content">
          <div class="notice_box_top_content_img">
            <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="">
            <img v-else src="../../../assets/img/avatar1.png" alt="">
          </div>
          <div class="notice_box_top_content_right">
            <div class="notice_box_top_content_right_user">{{ userInfo.nickName }}</div>
            <div class="notice_box_top_content_right_signature">{{ userInfo.signature }}</div>
          </div>
        </div>
      </div>
      <div class="notice_box_tab">
        <van-tabs v-model:active="active" title-active-color="#ff5000" line-height="0px" swipeable @click-tab="onClickTab">
          <van-tab title="动态"></van-tab>
          <van-tab title="关注"></van-tab>
        </van-tabs>
        <div class="notice_box_tab_content">
          <workMateList ref="workMateLists"  v-if="active===0" :userId="userId" />
          <topicList ref="topicLists"  :userId="userId"  v-else />
        </div>
      </div>
    </div>
     <van-popup v-model:show="showCommentPicker" round position="bottom">
      <sendComment @changeShowPicker="changeShowPicker" @updateMsg="updateMsg"  :id="infoId" :cid="commentId" :uid="userId" :uname="userName" />
    </van-popup>
  </div>
</template>

<script setup>
import { getUserInfoAPI, getUserInfoById } from '@/api/user';
import sendComment from '@/components/sendComment.vue';
import topicList from '@/components/topicList.vue';
import workMateList from '@/components/workMateList.vue';
import { getUid } from '@/utils/auth';
import { nextTick, provide, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const title = ref('个人中心')
const workMateLists = ref()
const topicLists = ref()
const active = ref(0)
const userId = router.currentRoute.value.query.id?parseInt(router.currentRoute.value.query.id):parseInt(getUid())
const rightText = router.currentRoute.value.query.id?ref(''):ref('编辑资料')
const showCommentPicker = ref(false)   // 是否显示评论框
const infoId = ref()  // 动态id
const commentId = ref('')  //评论id     
const userName = ref('')
const msgData = ref({
  // msg: '',
  // id: '',
  // cid:'',
  // uid: '',
  // uname:'',
  // nickName:''
})                       // 评论内容


const onClickTab = (e) => {
  setTimeout(function () {
    if (e.name == 0) {
      workMateLists.value.onRefresh()
    } else {
      topicLists.value.onRefresh()
    }
  }, 100)
  active.value = Number(e.name)
};
// 返回上一页
const onClickLeft = () => {
  router.back()
}
nextTick(() => {
  workMateLists.value.onRefresh()
})
// 编辑资料
const onClickRight = () => {
  router.push({
    path: '/editUser',
    query: {
      id: 1,
      dynamicKeepAlive: 0
    }
  })
}
const userInfo = ref({
  signature: '',
  nickName: '',
  avatar:''
}) // 用户信息
// 获取用户信息
const getUserInfo = async () => {
  if(userId){
    await getUserInfoById(userId).then(res => {
    console.log('用户信息', res)
    userInfo.value.nickName = res.data.nickName
    userInfo.value.signature = res.data.signature
    userInfo.value.avatar = res.data.avatar
  }).catch(err => {
    console.log(err)
  }).finally(() => {
    // setTimeout(() => {
    //   isGetUserInfo.value = true
    // }, 1000);
  })
  }else{
    await getUserInfoAPI().then(res => {
        console.log('用户信息', res)
        userInfo.value.nickName = res.data.nickName
        userInfo.value.signature = res.data.signature
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        // setTimeout(() => {
        //   isGetUserInfo.value = true
        // }, 1000);
      })
  }
  
}

getUserInfo()
// 显示评论框
const changeShowPicker = (val, id, cid, uid, uname) => {
  showCommentPicker.value = val
  infoId.value = id
  commentId.value = cid
  // userId.value = uid
  userName.value = uname
}
// 更新评论框内容
const updateMsg = (data) => {
  console.log("data")
  console.log(data)
   msgData.value = data
  // msgData.value.msg = data.content
  // msgData.value.id = data.infoId
  // msgData.value.cid = data.id
  // msgData.value.uid = data.userId
  // msgData.value.uname = data.user.nickName
  // msgData.value.nickName = data.toUser?.nickName
}

provide('showPicker', changeShowPicker)
provide('updateMsg', msgData)



</script>

<style lang="scss" scoped>
.notice {

  &_box {
    &_top {
      border-bottom: 1px solid #f1f1f1;

      &_content {
        display: flex;
        align-items: center;
        margin-top: .5333rem;
        margin-bottom: .5333rem;
        padding: 0 .2667rem;
        &_img {
          width: 2.1333rem;
          height: 2.1333rem;
          border-radius: 50%;
          :deep(img) {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 50%;
            }
          }
        }

        &_right {
          margin-left: .4rem;

          &_user {
            font-size: .5333rem;
            color: #333;
            margin-bottom: .2667rem;
          }

          &_signature {
            font-size: .4rem;
            color: #999;
          }
        }
      }
    }

    &_tab {

      &_content {
        padding: 0 .2667rem;
        padding-top: .4rem;
        border-top: .2667rem solid $color-bg;
      }
    }
  }
}
</style>